<template>
  <div id="bottomRight2">

   
         <div class="">
      
      <div>
        <div id="bottomRightChart2" style="width:100%;height:300px;"></div>
      </div>
    </div>
  
   
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.draw();
    this.charTimg();
  },
  mixins: [echartMixins],
  methods: {
    charTimg() {
      setInterval(() => {
        this.draw();
      }, 6000);
    },
    draw() {
      // 基于准备好的dom，初始化echarts实例
      let t =this;
      let w = document.documentElement.clientWidth / 100;
      let w1 = document.documentElement.clientWidth / 120;
      this.chart = this.$echarts.init(document.getElementById("bottomRightChart2"));
      //  ----------------------------------------------------------------
      let category = [1,2,3,4,5,6,7,8,9,10];
       let Data = [
        1250,
        1200,
        1150,
        1100,
        1220,
        1260,
        1300,
        1350,
        1420,
        1450
       
      ];
      let Data1 = [
        650,
        600,
        550,
        570,
        620,
        660,
        530,
        550,
        420,
        620
       
      ];
      let option= {
        title: {
          text: "晚高峰18点互补总出力功率",
          x: "center",
          y: 5,
          textStyle: {
            color: "#B4B4B4",
            fontSize: w,
            fontWeight: "normal"
          }
        },
        legend: {
          data: ['全省风电晚峰出力', '互补后水口晚峰出力'],
          bottom:'5%',
          textStyle: {
            color: "#fff",
            fontSize: w1
          }
        },
         grid: {
          left: 45,
          right:15,
          top: "10%"
        },

        xAxis: {
          type: 'category',
         
        
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          data: category
        },

        yAxis: [
          {
            splitLine: { show: false },

            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            }
          }
        ],
        series: [
          {
            name: '全省风电晚峰出力',
            type: 'bar',
            stack: 'one',
          itemStyle: {
            color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(32,248,255,50)'},
            
            { offset: 1, color: 'rgba(32,248,255,0)' }
              
            ])
          },
            data: Data
          },
          {
            name: '互补后水口晚峰出力',
            type: 'bar',
            stack: 'one',
            itemStyle: {
              color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(18,135,255,50)' },
              
              { offset: 1, color: 'rgba(18,135,255,10)' }
              ])
            },
            data: Data1
          }
        ]
};

     
      

      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss">
#bottomRight2 {
  padding: 5px;
  margin-bottom: 5px;
  height: 300px;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
    padding: 0.2rem;
    height: 30vh;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  } //下滑线动态
  .decoration2 {
    position: absolute;
    right: 0.125rem;
  }
  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;
    .active-ring-name {
      padding-top: 0.125rem;
    }
  }
}
</style>